<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>角色列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
    <!--
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户</label>
                            <div class="layui-input-inline">
                                <input type="text" name="user" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="submit" class="layui-btn"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
    -->

        <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>

    <!-- 添加弹出框	-->
    	<div class="layui-row" id="AddUserInfodiv" style="display:none;">
                  <div class="layui-col-md11">
                      <form class="layui-form layui-form-pane" action="" lay-filter="AddRoleInfo">
                           <div class="layui-form-item">
                            <div class="layui-inline">
                              <label class="layui-form-label">角色名</label>
                              <div class="layui-input-inline" style="width: 213px;">
                                <input type="text" name="Name" autocomplete="off" lay-verify="name" placeholder="" class="layui-input">
                              </div>
                          	<div class="layui-form-mid" style="color: red;">*</div>
                             </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                      <select name="Status" lay-filter="StatusKey">
                                        <option value="2" selected="">启用</option>
                          			  <option value="1">禁用</option>
                                      </select>
                                    </div>
                          	  </div> 
                            
                              <div class="layui-inline">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-inline" style="width: 213px;">
                                  <input type="text" name="Remark" autocomplete="off" class="layui-input">
                                </div>
                              </div>   
                            </div>
                            <div class="layui-form-item">
                              <button class="layui-btn" lay-submit="" lay-filter="AddRoleSubmit">确认添加</button>
                            </div>
                      </form>
                  </div>
    	</div>
    <!-- 添加弹出框	-->	

    </div>
</div>
</body>

<script type="text/html" id="statusTpl">
  {{# if (d.Status == '2') { }}
     <span style="color:#218868">启用</span>
	{{# } else { }}
    <span style="color:#7A8B8B">禁用</span>
{{# } }}
</script>	

<script type="text/html" id="listAction">
  <a class="layui-btn layui-btn-xs" lay-event="NodeToRole"><i class="layui-icon">&#xe672;</i>授权列表</a>
  <a class="layui-btn layui-btn-xs" lay-event="RoleToUser"><i class="layui-icon">&#xe60a;</i>用户列表</a>
  <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="Delete"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script type="text/html" id="toolbarHead">
  <div class="layui-btn-container">
    <button class="layui-btn"  lay-event="Add"><i class="layui-icon"></i>添加</button>
  </div>
</script>

<script>
    layui.use(['form', 'table','miniTab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
            miniTab = layui.miniTab,
            miniTab.listen();

            form.render();

      		form.verify({
      		    name: [/(.+){2,}$/, '大于2个字符且不能有特殊字符']
      		});	

         //头工具栏事件
          table.on('toolbar(currentTableFilter)', function(obj){
              var checkStatus = table.checkStatus(obj.config.id);
              switch(obj.event){
                case 'Add':							
    		            layer.open({
                    	//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type:1,
            			      skin: 'layui-layer-rim',
                        title:"添加管理员",
                        area: ['550px','600px'],
                        content:$("#AddUserInfodiv") //content:$("#AddUserInfodiv").html()
                    });				
    		            form.render();	
		                //添加提交
                    form.on('submit(AddRoleSubmit)', function(datas){		
            		       console.log(datas.field);
            			     layer.confirm('确定添加?', {icon: 3, title:'提示',yes: function(index){
                                 $.ajax({
                                   url: "/rbac/role/AddAndEdit",
                                   type: "post",
                                   data: datas.field,
                                   dataType: "json",
                                   success: function (resp) {
            					            console.log(resp);
                                             if(resp.status){
                                                layer.msg('添加成功', {icon: 1});
            									                 //window.location.reload();
            									                  table.reload('currentTableId', {
                                                       url: '/rbac/role/List'
                                                });
                                             }else{
                                                 layer.msg('添加失败',{icon:2});
                                             }
                                    }
                               });		  	  
                           },
                            cancel: function(index, layero){ 
                                layer.close(index);
            		            console.log("不操作");
                            } 
                        }); 		   
            	        return false; 	
            		    });		
                break;
                case 'DelUser':
                   var data = checkStatus.data;
                   layer.msg('选中了：'+ data.length + ' 个');
                   break;  
                };
          });	

        table.render({
            elem: '#currentTableId',
            url: '/rbac/role/List'+location.search,
            toolbar: '#toolbarHead',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                //{type: "checkbox", width: 50},
                {field:'Id',width:80,sort: true, title: 'ID'},
      		      {field:'Name',sort: true,edit:true, title: '角色名'},
      		      {field:'Status',sort: true, title: '状态',width:80,templet: '#statusTpl', unresize: true},
      		      {field:'Remark',sort: true,edit:true, title: '备注'},
                {fixed:'right',align: 'left', toolbar: '#listAction', title: '操作'}
            ]],
            //size:'lg',
            limits: [25, 50, 100],
            limit: 25,
            page: true
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //var result = JSON.stringify(data.field);
            data.field.cronjobName = data.field.cronjobName.replace(/^\s*|\s*$/g,"");
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                },
                where: {
                  key:{
                    cronjobName:data.field.cronjobName
                  }
                }
            });
            return false;
        });


     //监听行工具事件
        table.on('tool(currentTableFilter)', function(obj){
          var data = obj.data;
          if(obj.event === 'NodeToRole'){
                var index = layer.open({
                    title: data.Name+'角色的授权列表',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/page/rbac/roleToNodeList.html?Id='+data.Id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
      	    //xadmin.open(data.Name+'角色的授权列表','/rbac/role/RoleToNodeList?Id='+data.Id);
          } else if(obj.event === 'RoleToUser'){
                var index = layer.open({
                    title: data.Name+'角色的用户列表',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['90%', '90%'],
                    content: '/page/rbac/roleToUserList.html?Id='+data.Id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
      	      //xadmin.open(data.Name+'角色的用户列表','/rbac/role/RoleToUserList?Id='+data.Id);
          } else if(obj.event === 'Delete'){
      	    //console.log(data);
              layer.confirm('确定删除?', {icon: 3, title:'删除提示',yes: function(index){
      			 $.ajax({
      			   url: "/rbac/role/Delete",
      			   type: "post",
      			   data: data,
      			   dataType: "json",
      			   success: function (resp) {
      						console.log(resp);
      						 if(resp.status){
      							 layer.msg('删除成功', {icon: 1});
      							 //window.location.reload();
      							 obj.del();
      						 }else{
      							 layer.msg('删除失败',{icon:2});
      						 }
      				}
      		   });		  	  
              },
      		cancel: function(index, layero){ 
      			layer.close(index);
      			console.log("不操作");
      		} 
      		}); 
          }
        });

        //监听单元格编辑
        table.on('edit(currentTableFilter)', function(obj){
            var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
        		$.ajax({
                    url: "/rbac/role/AddAndEdit",
                    type: "post",
                    data: data,
                    dataType: "json",
                    success: function (resp) {
                        if(resp.status){
                            layer.msg('[ID: '+ data.Id +'] ' + field + ' 字段更改为：'+ value);
                        }else{
                            layer.msg('[ID: '+ data.Id +'] ' + field + '更改失败',{icon:2});
                        }
                }
            });	
        });

    });
</script>
</html>